<template>
    <div class="table-box card">
        <div class="header-container">
            <h1 class="main-title">小程序配置</h1>
            <p class="sub-title">动态调整小程序部分内容与关键参数</p>
        </div>

        <!-- AI识别配置卡片 -->
        <el-card class="ai-config-card" header="AI识别配置">
            <div class="weight-container">
                <div class="weight-item">
                    <span class="weight-label">颜色相似度权重</span>
                    <span class="weight-value">{{ colorWeight }}%</span>
                </div>
                <div class="weight-item">
                    <span class="weight-label">纹理相似度权重</span>
                    <span class="weight-value">{{ textureWeight }}%</span>
                </div>
            </div>

            <el-slider v-model="colorWeight" :max="100" :min="0" show-stops :format-tooltip="formatTooltip"
                @change="handleWeightChange"></el-slider>
        </el-card>
        <!-- 首页内容配置卡片 -->
        <el-card class="ai-config-card" header="首页内容配置">
            <!-- Banner列表 -->
            <div class="banner-list">
                <div v-for="banner in banners" :key="banner.id" class="banner-item">
                    <!-- 图片区域 -->
                    <el-image 
                        :src="banner.coverPic" 
                        class="banner-thumb"
                        :preview-src-list="[banner.coverPic]"
                        fit="cover"
                    ></el-image>
                    <!-- 标题区域 -->
                    <div class="banner-info">
                        <span class="banner-title">{{ banner.bannerName }}</span>
                    </div>
                    <!-- 操作按钮 -->
                    <div class="banner-actions">
                        <el-button type="text" size="small" icon="EditPen" @click="openDiolg('编辑', banner)">编辑</el-button>
                        <el-button type="text" size="small" icon="Delete" style="color: #f56c6c;" @click="deleteAccount(banner)">删除</el-button>
                    </div>
                </div>
            </div>
            
            <!-- 上传新Banner按钮 -->
            <el-button 
                type="primary" 
                plain 
                class="upload-btn"
                @click="openDiolg('新增', null)"
            >
                上传新Banner
            </el-button>
        </el-card>
    </div>
     <MyDiolg ref="dialogRef" />
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { EditPen, Delete } from "@element-plus/icons-vue";
import MyDiolg from "./Form.vue";
import {
    listMiniConfig,
    getMiniConfig,
    delMiniConfig,
    addMiniConfig,
    updateMiniConfig,
    getAiConfig,
    updateAiConfig
} from "@/api/system/miniConfig";
import { useHandleData } from "@/hooks/useHandleData";
import { number } from 'echarts';

// 初始化权重数据（颜色60%，纹理40%）
const colorWeight = ref(60);
const textureWeight = ref(40);

// 首页Banner示例数据
const banners = ref([]);

// 格式化提示文字
const formatTooltip = (val: number) => `${val}%`;

// 权重变化处理
const handleWeightChange = async(newVal: number) => {
    textureWeight.value = 100 - newVal; // 保持总和为100%
    await updateAiConfig({ aiConfig: newVal })
    ElMessage.success("权重更新成功");
    getMiniConfigData();
};

// 上传新Banner点击事件（预留）
const handleUploadBanner = () => {
    ElMessage.info("暂未实现上传功能");
};
//数据获取
const getMiniConfigData = async () => {
    let res = await listMiniConfig({pageNum:1,pageSize:100});
    banners.value =res.rows;
    let res2 = await getAiConfig();
    colorWeight.value = Number(res2.msg);
    textureWeight.value = 100 - Number(res2.msg);
}
const dialogRef = ref(null);
const openDiolg = (title: string, row: any) => {
    const params = {
        title,
        isView: title === "查看",
        rowData: { ...row },
        api: title === "新增" ? addMiniConfig : title === "编辑" ? updateMiniConfig : undefined,
        getTableList: getMiniConfigData,
    };
    // if(title == '编辑'){
    //     params.rowData.bannerName = params.rowData.bannerName;
    // }
    dialogRef.value?.acceptParams(params);
};

const deleteAccount = async (params: any) => {
    const ids = params.id
    await useHandleData(delMiniConfig, ids, '是否删除编号为' + ids + '的数据');
    getMiniConfigData();
};
onMounted(()=>{
    getMiniConfigData();
})
</script>

<style lang="scss" scoped>
.header-container {
    padding: 24px 24px 16px;
    border-bottom: 1px solid #f0f2f5;

    .main-title {
        font-size: 20px;
        font-weight: 600;
        color: #303133;
        margin-bottom: 8px;
    }

    .sub-title {
        font-size: 14px;
        color: #606266;
        margin: 0;
    }
}

.ai-config-card {
    margin: 24px;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);

    .el-card__header {
        padding: 0 0 16px;
        font-size: 16px;
        font-weight: 600;
        color: #303133;
        border-bottom: 1px solid #f0f2f5;
    }

    .weight-container {
        display: flex;
        justify-content: space-between;
        margin: 0 0 20px;
        padding: 0 12px;

        .weight-item {
            display: flex;
            align-items: center;
            gap: 8px;

            .weight-label {
                font-size: 14px;
                color: #606266;
            }

            .weight-value {
                font-size: 18px;
                font-weight: 600;
                color: #303133;
            }
        }
    }

    // 新增首页Banner样式
    .banner-list {
        margin: 0 -20px; // 抵消卡片内边距，使分隔线满宽
        
        .banner-item {
            display: flex;
            align-items: center;
            padding: 16px 20px;
            border-bottom: 1px solid #f8f9fa;

            &:last-child {
                border-bottom: none;
            }

            .banner-thumb {
                width: 80px;
                height: 40px;
                border-radius: 4px;
                overflow: hidden;
            }

            .banner-info {
                flex: 1;
                padding: 0 24px;

                .banner-title {
                    font-size: 14px;
                    color: #606266;
                    // 文字溢出处理
                    max-width: 300px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                }
            }

            .banner-actions {
                display: flex;
                align-items: center;
                gap: 8px;
            }
        }
    }

    .upload-btn {
        display: block;
        margin: 16px auto 0;
        padding: 8px 24px;
        border-radius: 6px;
    }
}
</style>